import loadingUrl from "@/assets/loading.svg"
import styles from "./loading.module.less"

//得到el中loaiding效果的img元素
function getLoadingImage(el) {
    return el.querySelector("img[data-role=loading]")
}

function createLoadingImg() {
    const img = document.createElement("img");
    img.dataset.role = "loading";
    img.src = loadingUrl;
    img.className = styles.loading;
    return img;
}

// 导出指令的配置对象
export default function (el, binding) {
    const curImg = getLoadingImage(el);
    if (binding.value) {
        if (!curImg) {
            //如果没有img元素就创建
            const img = createLoadingImg();
            el.appendChild(img);
        }

    } else {
        //删除img元素
        if (curImg) {
            curImg.remove();
        }
    }
}